<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>求知，Thirsty for Knowledge！</title>
<c:set var="path" value="${pageContext.request.contextPath}"
	scope="page" />
<script type="text/javascript" src="${path}/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
	src="${path}/js/jquery.onepage-scroll.min.js"></script>
<link rel="stylesheet" href="${path}/css/onepage-scroll.css" />
<link rel="stylesheet" href="${path}/css/zui.min.css" />
<script type="text/javascript" src="${path}/js/sendCode.js"></script>
<script>
	$(function() {
		$('.main').onepage_scroll({
			sectionContainer : '.page',
			loop : false,
			pagination : false,
			beforeMove : function(index) {
				switch (index) {
				case 1:
					$("#nav").slideUp();
					break;
				case 2:
					$("#nav").slideDown();
					break;
				case 3:
					$("#nav").slideDown();
					break;
				case 4:
					$("#nav").slideDown();
					break;
				}
			},
			afterMove : function(index) {
				switch (index) {
				case 2:
					$("#img2").animate({
						position : "absolute",
						left : "-1000px"
					}, "fast");
					break;
				case 3:
					$("#img2").animate({
						position : "absolute",
						left : "5px"
					}, 500);
					$("#img3").animate({
						position : "absolute",
						right : "-1000px"
					}, "fast");
					break;
				case 4:
					$("#img3").animate({
						position : "absolute",
						right : "20px"
					}, 500);
					$("#img2").animate({
						position : "absolute",
						left : "-1000px"
					}, "fast");
					break;
				}
			}
		});
	});
</script>
<style>
p.title {
	position: relative;
	top: 35%;
	font: 700 40px "Microsoft Yahei";
	color: #fff;
	text-align: center;
}

#nav {
	display: none;
	height: 60px;
	width: 100%;
	text-align: center;
	font-size: 20px;
	line-height: 50px;
	border-bottom: 1px solid gray;
	position: fixed;
	_position: absolute;
	z-index: 3;
	background-color: #fff;
	_top: expression(eval(document.documentElement.scrollTop));
}

#nav img {
	position: absolute;
	top: 15px;
	left: 100px;
}

#nav .lg {
	height: 30px;
	width: 130px;
	position: absolute;
	right: 100px;
	top: 6px;
}

.page .lg {
	width: 120px;
	position: absolute;
	right: 100px;
	top: 50px;
}

.login-panel,.register-panel {
	position: absolute;
	left: 450px;
	top: 100px;
	width: 400px;
	height: 320px;
	z-index: 101;
	display: none;
}

.login-panel {
	height: 270px;
}

.layer {
	width: 100%;
	height: 100%;
	z-index: 5;
	background-color: #FBFBFC;
	position: absolute;
	filter: alpha(opacity = 50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.6;
	display: none;
}

.input-group {
	width: 70%;
	margin: 0 auto;
}

.vedio {
	width: 600px;
	height: 480px;
	position: absolute;
	left: 340px;
	top: 150px;
	background-color: #ddd;
	z-index:1000001;
	display: none;
}
</style>
</head>
<script type="text/javascript">
	function openLogin() {
		$(".login-panel").css("display", "block");
		$(".layer").css("display", "block");
	}

	function openReg() {
		$(".register-panel").show();
		$(".layer").show();
	}

	function cancelLogin() {
		$(".layer").css("display", "none");
		$(".login-panel").css("display", "none");
	}

	function cancelReg() {
		$(".register-panel").hide();
		$(".layer").hide();
	}

	/*刷新验证码*/
	function refreshCode() {
		$("#code").attr("src",
				"${path}/VerifyCodeServlet?now=" + new Date().getTime());
	}
</script>

<body>
	<div class="layer"></div>
	<div class="panel panel-primary register-panel">
		<div class="panel-heading">注册--可使用手机或邮箱注册</div>
		<div class="panel-body">
			<ul class="nav nav-tabs">
				<li class="active"><a href="javascript:void(0);"
					onclick="showTel();">手机注册</a></li>
				<li><a href="javascript:void(0);" onclick="showEmail();">邮箱注册</a>
				</li>
			</ul>
			<script type="text/javascript">
				function showTel() {
					$("#tab-tel").show();
					$("#tab-email").hide();
					$(".nav-tabs li:last").removeClass("active");
					$(".nav-tabs li:first").attr("class", "active");
				}

				function showEmail() {
					$("#tab-tel").hide();
					$("#tab-email").show();
					$(".nav-tabs li:first").removeClass("active");
					$(".nav-tabs li:last").attr("class", "active");
				}

				function checkCode() {
					var code = $("#verify").val();
					$.post("${path}/CheckCodeController", {
						code : code
					}, function(data) {
						if (data == "0") {
							$("#ckcode").css("color", "#D2322D");
							$("#ckcode").html("<i class='icon-remove'></i>");
							$("#mobReg").attr({
								"disabled" : "disabled"
							});
						} else {
							$("#ckcode").css("color", "#229F24");
							$("#ckcode").html("<i class='icon-ok'></i>");
							$("#mobReg").removeAttr("disabled");
						}
					});
				}

				function checkPhone() {
					var flag = false;
					if (!$("#phone").val() == "") {
						if ($("#phone").val().match(
								/^(?:13\d|15\d|18\d)\d{5}(\d{3}|\*{3})$/)) {
							flag = true;
						}
					}
					if (flag) {
						$("#ckphone").css("color", "#229F24");
						$("#ckphone").html("<i class='icon-ok'></i>");
						$("#send").removeAttr("disabled");
					} else {
						$("#ckphone").css("color", "#D2232D");
						$("#ckphone").html("<i class='icon-remove'></i>");
						$("#send").attr({
							"disabled" : "disabled"
						});
					}
				}

				function doReg() {
					//为了获取选项卡的标题，其实是获取选项卡对应的div的id属性
					var title = $(".register:visible").parent().attr("id");
					var url = "";//注册的url
					if (title == "tab-tel") {
						var mobile = $("#phone").val();
						var pwd = $("#password").val();
						url = "${path}/RegisterByMobController";//手机注册的servlet的url 
						$.post(url, {
							mobile : mobile,
							password : pwd
						}, function(result) {
							if (result = "s") {
								alert("注册成功,请登录");
								history.go(0);
							} else {
								alert("注册失败！");
							}
						});
					} else {
						url = "${path}/RegisterByEmailController";//邮箱注册的servlet的url 
						$.post(url, {
							email : email
						}, function(result) {
							if (result = "s") {
								alter("邮件已发送，请注意查收！");
							}
						});
					}
				}

				function doSubmit() {
					var username = $("#username").val();
					var pwd = $("#pwd").val();
					var ver = $("#ver").val();

					$
							.post(
									"${path}/UserLoginController",
									{
										username : username,
										pwd : pwd,
										ver : ver
									},
									function(data) {
										if (data == "0") {
											alert("验证码错误！");
										} else if (data == "1") {
											alert("用户名或者密码错误！");
										} else if (data == "2") {
											alert("该账号未激活");
										} else if (data == "3") {
											alert("您的账号已被禁用，请联系管理员@\n\t jarvan4dev@163.com");
										} else {
											alert("登陆成功！");
											window.location.href = "${path}/ShowMainPageByUser";
										}
									});
				}

				function checknull() {
					var username = $("#username").val();
					var pwd = $("#pwd").val();
					var ver = $("#ver").val();
					if (username != "" && pwd != "" && ver != "") {
						$("#log").removeAttr("disabled");
					} else {
						$("#log").attr({
							"disabled" : "disabled"
						});
					}
				}

				function playvedio() {
					$(".vedio").fadeIn(1000);
				}
				function closevedio(){
					$(".vedio").fadeOut(100);
				}
			</script>
			<div class="tab-content">
				<div class="tab-pane" id="tab-tel" style="display: block;">
					<br />
					<div class="input-group">
						<span class="input-group-addon"><i class="icon-mobile"></i></span>
						<input type="text" class="form-control" id="phone"
							placeholder="手机" style="width: 90%;" onblur="checkPhone();" />&nbsp;<span
							id="ckphone"></span>
					</div>
					<br />
					<div class="input-group">
						<span class="input-group-addon"><i class="icon-lock"></i></span> <input
							type="text" class="form-control" id="verify" placeholder="验证码"
							onblur="checkCode();" style="width: 35%;" />&nbsp;<span
							id="ckcode"></span>&nbsp;
						<button id="send" disabled="disabled" class="cd"
							style="height: 32px;">点击发送</button>
					</div>
					<br />
					<div class="input-group">
						<span class="input-group-addon"><i class="icon-key"></i></span> <input
							type="password" class="form-control" id="password"
							placeholder="密码(6-20位字母和数字)" style="width: 90%;" />
					</div>
					<br />
					<button class="btn btn-primary register" id="mobReg"
						disabled="disabled" style="width: 68px; margin-left: 100px;"
						data-loading-text="正在注册..." onclick="doReg();">注 册</button>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<button class="btn btn-primary" style="width: 68px;"
						onclick="cancelReg();">取 消</button>
				</div>
				<div class="tab-pane" id="tab-email" style="display: none;">
					<br />
					<h6 class="text-success"
						style="width: 70%; margin: 0 auto; line-height: 150%;">请填写正确的邮箱地址，我们会将验证邮件发送到该邮箱，请注意查收！</h6>
					<br />
					<div class="input-group">
						<span class="input-group-addon"><i class="icon-envelope"></i></span>
						<input type="text" class="form-control email" placeholder="邮箱"
							style="width: 95%;" />
					</div>
					<br />
					<button class="btn btn-primary register"
						style="width: 68px; margin-left: 100px;"
						data-loading-text="正在注册..." onclick="doReg();">注 册</button>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<button class="btn btn-primary" style="width: 68px;"
						onclick="cancelReg();">取 消</button>
				</div>
			</div>
		</div>
	</div>
	<div class="panel panel-primary login-panel">
		<div class="panel-heading">登录</div>
		<div class="panel-body">
			<div class="input-group" style="margin-top: 10px;">
				<span class="input-group-addon"><i class="icon-user"></i></span> <input
					type="text" class="form-control" id="username"
					placeholder="用户名/手机/邮箱" onblur="checknull();" />
			</div>
			<br />
			<div class="input-group">
				<span class="input-group-addon"><i class="icon-key"></i></span> <input
					type="password" class="form-control" id="pwd" placeholder="密码"
					onblur="checknull();" />
			</div>
			<br />
			<div class="input-group">
				<span class="input-group-addon"><i class="icon-unlock-alt"></i></span>
				<input type="password" class="form-control" placeholder="验证码"
					id="ver" style="width: 100px;" onblur="checknull();" />
				&nbsp;&nbsp;&nbsp;&nbsp; <img id="code"
					src="${path}/VerifyCodeServlet" width="90" height="31"
					onclick="refreshCode();" style="cursor: pointer;" />
			</div>
		</div>
		<center>
			<button class="btn btn-primary" style="width: 68px;"
				data-loading-text="正在登录..." disabled="disabled" id="log"
				onclick="doSubmit();">登 录</button>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<button class="btn btn-primary" style="width: 68px;"
				onclick="cancelLogin();">
				取 消<b /utton>
		</center>
	</div>
	<!--头部固定-->
	<div id='nav'>
		<img src="${path}/images/logob.png" alt="logo" />
		<div class="lg">
			<button type="button" class="btn btn-primary active"
				onclick="openReg();">注 册</button>
			<button type="button" class="btn btn-primary active"
				onclick="openLogin();">登 录</button>
		</div>
	</div>
	<div class="main">
		<div class="page page1"
			style="background:url(${path}/images/indexp1.jpg);background-size:100% 100%;">
			<div class="lg">
				<button type="button" class="btn btn-primary active"
					onclick="openReg();">注 册</button>
				<button type="button" class="btn btn-primary active"
					style="float: right;" onclick="openLogin();">登 录</button>
			</div>
		</div>
		<div class="page page2">
			<br /> <br /> <br /> <br /> <br /> <br /> <br />
			<center>
				<h1>为知识而生，为技术而活！</h1>
				<a href="javascript:void(0);" onclick="playvedio();"
					style="color: #3280FC; font-size: 10px;">观看视频介绍<i
					class="icon-play-circle"></i></a>
			</center>
			<div class="vedio">
					<a href="javascript:void(0);" onclick="closevedio();" style="float:right;margin-right:20px;margin-top:10px;"><i class="icon-remove" style="font-size:24px;"></i></a>
					<video width="550" style="margin-top: 15px;margin-left:15px;" controls="controls">
						<source src="/qiuzhi/vedio/movie.ogg" type="video/ogg">
						Your browser does not support HTML5 video.
					</video>
				</div>
		</div>
		<div class="page page3">
			<div id="word"
				style="width: 400px; height: 300px; position: absolute; right: 100px; top: 150px;">
				<h1>清晰任务 造就强大团队</h1>
				<br />
				<h4>通过任务中心，连接企业目标和每一位成员的努力</h4>
				<h4>让每一个人都能做到GTD</h4>
			</div>
			<img id="img2" width="600" height="500"
				src="${path}/images/intro02.jpg"
				style="position: absolute; top: 110px; left: -1000px;">
		</div>
		<div class="page" style="background-color: #F1F1F1;">
			<div id="word"
				style="width: 400px; height: 300px; position: absolute; left: 200px; top: 150px;">
				<h1>我们的成果</h1>
				<h1>让自己“看”到</h1>
				<br />
				<h4>每一刻 都在积累知识资产</h4>
				<h4>每一篇文档，每一次对话，每一个任务</h4>
				<h4>每一天的努力都一览无余</h4>
			</div>
			<img id="img3" width="700" height="600"
				src="${path}/images/intro03.jpg"
				style="position: absolute; top: 120px; right: -1000px;">
		</div>
	</div>
</body>

</html>